<template>
    <div class="newsinfo-container">
        <!-- 标题 -->
        <div class="news-header">
            <p class="title">{{ newsinfo.title}}</p>
            <p class="sub-title">
                <span>{{ newsinfo.add_time | dataFormat}}</span>
                <span>点击：{{ newsinfo.click }}次</span>
            </p>
        </div>
        <p class="line"></p>
        <!-- 内容区域 -->
        <div class="content" v-html="newsinfo.content">
        </div>
        <!-- 评论区域 -->
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
import comment from "../subcomponent/comment.vue"
export default {
    data(){
        return {
            id: this.$route.params.id,
            newsinfo: {}
        }
    },
    created(){
        this.getNewsInfo()
    },
    methods: {
        getNewsInfo(){
            this.$http.get('api/getnew/' + this.id).then(result => {
                if(result.body.status === 0){
                    this.newsinfo = result.body.message[0]
                }else{

                }
            })
        }
    },
    components: {
        "comment-box": comment
    }
}
</script>

<style lang="scss">
.newsinfo-container{
    padding: 0 10px;
    .news-header{
        text-align: center;
        padding-top: 5px;
        .title{
            color: rgba(65, 105, 225, 0.9);
            padding: 3px;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            padding-bottom: 2px;
            border-radius: 6px;
            margin-top: 4px;
            box-shadow: 2px 2px 6px rgba(#bbb, 0.9);
            border: 1px solid rgba(#bbb, 0.7);
            background-image: linear-gradient(to top, #cbcbcb, #d3d3d3, #eae8ed);
        }
        .sub-title{
            display: flex;
            justify-content: space-between;
            color: #226aff;
        }
    }
    .line{
        height: 1px;
        background-color: rgb(65, 105, 225);
        position: relative;
        box-shadow: inset 0 2px 5px rgba(#ccc, 0.6);
        &::before, &::after{
            display: inline-block;
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: -9px;
            background-color: rgb(65, 105, 225);
        }
        &::before{
            left: -5px;
        }
        &::after{
            right: -5px;
        }
    }
    .content{
        img{
            width: 100%
        }
    }
}
</style>